<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form size="small" label-width="100px">
        <el-form-item label="时间选择：">
          <el-radio-group v-model="listPram.orderType" type="button" @change="seachList">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="1">今天 </el-radio-button>
            <el-radio-button label="2">昨天 </el-radio-button>
            <el-radio-button label="3">最近七天</el-radio-button>
            <el-radio-button label="4">最近30天 </el-radio-button>
            <el-radio-button label="5">本月</el-radio-button>
            <el-radio-button label="5">本年</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="明细类型:">
          <el-select v-model="listPram.status" clearable placeholder="全部" style="width: 400px">
            <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词:">
          <el-input v-model="listPram.fwkeyword" placeholder="请输入微信昵称/ID" clearable style="width: 400px"/>
          <el-button icon="el-icon-search" size="mini" type="primary" @click.native="getList" style="margin-left: 10px">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>


      </el-form>



      <el-table :data="listData.list" size="mini"
                :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>

        <el-table-column align="center" label="用户ID" prop="id" width="80"></el-table-column>
        <el-table-column align="center" label="昵称"  prop="orderId" min-width="200"/>
        <el-table-column align="center" label="金额" prop="orderType" min-width="200"/>
        <el-table-column align="center" label="明细类型" prop="userNmae" min-width="200"/>

        <el-table-column align="center" label="备注" prop="calculatedArea" min-width="200"/>
        <el-table-column align="center" label="创建时间" prop="calculatedArea" min-width="200"/>



      </el-table>
      <el-pagination
          :current-page="listPram.page"
          :page-sizes="[10,20,40,60,80,100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listData.count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>




  </div>
</template>

<script>
import {recordList} from "@/api/payment";
import {checkPermi} from "@/utils/permission";

export default {
  data() {
    return {
      listData: {
        list: [], count: 0
      },
      orderPayTime:[],
      payTime:[],
      listPram: {
        page: 1,
        limit: 10,
        fwkeyword: '',
        houseType: '',
        invoiceStatus: '',
        orderType : '',
        payStatus: '',
        orderPayEndTime: '',
        orderPayStartTime: '',
        payTime: '',
        untilPayTime: '',
        receiptStatus: '',
        yhkeyword: '',
      },
      statusOptions: [{
        value: '0',
        label: '无效'
      }, {
        value: '1',
        label: '租赁中'
      }, {
        value: '2',
        label: '已退租'
      }, {
        value: '3',
        label: '已变更'
      }],
      editDialog: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editDate: {},
      },
      detailDialog: {
        visible: false,
        id: null
      },
      tableLoading: false,
      houseTypeOptions: [],
      viewData: {
        registrationsNum: 0,
        feedbackNum: 0,
        arrearsUserNum: 0,
        devicesNum: 0,
        abnormalDevicesNum: 0,
        paymentAmount: 0,
      },

    }
  },
  mounted() {
    this.imageUrl = process.env.VUE_APP_IMAGE_URL
    this.getList()
  },
  methods: {
    checkPermi,
    getList() {
      this.tableLoading = true
      if (this.orderPayTime || this.payTime) {

        this.listPram.payTime = this.payTime[0]
        this.listPram.untilPayTime =  this.payTime[1]
        this.listPram.orderPayEndTime = this.orderPayTime[0]
        this.listPram.orderPayStartTime = this.orderPayTime[1]

      }

      recordList(this.listPram).then(res => {
        this.listData = res;
      }).finally(() => {
      })
      this.tableLoading = false;
    },
    seachList() {
      this.listPram.page = 1
      this.getList()
    },
    openEdit(isCreate, editDate) {
      this.editDialog.editDate = editDate;
      this.editDialog.isCreate = isCreate;
      this.editDialog.visible = true
    },
    handleSizeChange(val) {
      this.listPram.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getList()
    },
    resetQuery() {
      this.listPram.houseType = '';
      this.listPram.invoiceStatus = '';
      this.listPram.orderType = '';
      this.listPram.payStatus = '';
      this.listPram.orderPayEndTime = '';
      this.listPram.orderPayStartTime = '';
      this.listPram.payTime = '';
      this.listPram.untilPayTime = '';
      this.listPram.receiptStatus = '';
      this.listPram.yhkeyword = '';
      this.listPram.fwkeyword = '';
      this.getList()
    },


  }
}
</script>

<style scoped lang="scss">
.clickable-link {
  color: #1890ff;
  cursor: pointer;
  text-decoration: none;
}

.clickable-link:hover {
  text-decoration: underline;
  color: #1890ff;
}
</style>
